<style scoped>
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 24px 32px;
  margin-bottom: 32px;
  border-radius: 16px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

.form-item {
  width: 187px;
  margin: 0 8px;
}

.reset {
  color: #ff5d47;
}

.search-btn {
  background-color: #ff4949;
  color: #fff;
}

.active {
  background-color: #000;
  color: #fff;
}

.table {
  width: 100%;
  border-radius: 16px;
  margin: 16px 0;
}

.color-g {
  color: #19cc8e;
}

.color-r {
  color: #ff5d47;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #5f6a7f;
  justify-content: space-between;
}

.row span {
  color: #191c1f;
  font-size: 14px;
}
.see {
  color: #ff5d47;
  cursor: pointer;
}
.addrow {
  color: #606266;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}
.flex-a {
  display: flex;
  align-items: center;
}
</style>

<template>
  <div>
    <div class="search-box">
      GPT角色信息
      <!-- DPT角色信息:
      <el-input
        size="large"
        class="form-item"
        v-model="searchParam.id"
        placeholder="请输入"
      ></el-input>
      设置使用:
      <el-select
        size="large"
        class="form-item"
        v-model="searchParam.status"
        placeholder="请选择"
      >
        <el-option label="启用" :value="true" />
        <el-option label="停用" :value="false" />
      </el-select>
      <el-button size="large" class="reset" @click="reset" text>重置</el-button>
      <el-button size="large" class="search-btn" @click="search"
        >搜寻</el-button
      > -->
      <div style="flex: 1"></div>
      <el-button size="large" class="search-btn" @click="showAddDialog"
        >+ 新建设置</el-button
      >
    </div>
    <el-table :data="dataList" class="table" size="large">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="role_content" label="角色信息" />
      <el-table-column prop="active" label="设置使用">
        <template #default="scope">
          <div :class="scope.row.active ? `color-g` : 'color-r'">
            {{ scope.row.active ? "启用" : "停用" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <div class="flex-a">
            <el-button size="small" text @click="edit(scope.row)">
              查看
            </el-button>
            <el-icon @click="del(scope.row)" class="see">
              <Delete />
            </el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="dataTotal"
      class="mt-4"
      :page-size="pageSize"
      :current-page="page"
      @size-change="changeSize"
      @current-change="changePage"
      :page-sizes="[20, 50, 100]"
    />
    <el-dialog v-model="showAdd" title="设置详情" width="400">
      <div class="addrow">角色信息</div>
      <el-input v-model="editData.role_content" style="margin-bottom: 12px" />
      <div class="addrow" style="margin-bottom: 5px">设置使用</div>
      <el-radio-group v-model="editData.active">
        <el-radio :value="true" size="large">启用</el-radio>
        <el-radio :value="false" size="large">禁用</el-radio>
      </el-radio-group>
      <template #footer>
        <div>
          <el-button type="" @click="showAdd = false"> 取消 </el-button>
          <el-button type="primary" @click="adding"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";

export default {
  name: "userList",
  data() {
    return {
      isEdit: false,
      showAdd: false,
      searchParam: {
        role_content: "",
        active: "",
      },
      dataList: [],
      editData: {
        role_content: "",
        active: true,
      },
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    showAddDialog() {
      this.showAdd = true;
      this.editData = {
        role_content: "",
        active: true,
      };
    },
    async del(query) {
      ElMessageBox.confirm(
        `你确定要删除ID为${query.id}的设置吗？`,
        "删除设置",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          draggable: true,
        }
      ).then(async () => {
        const res = await request.DELETE(
          "/sys/chat/role_config/" + query.id + "/"
        );
        if (res.status == 100100) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          this.getDataList();
        } else {
          ElMessage.error(res.message);
        }
      });
    },
    async adding() {
      if (this.isEdit) {
        this.editing();
        return false;
      }

      const params = {
        role_content: this.editData.role_content,
        active: this.editData.active,
      };

      const loading = ElLoading.service();
      const res = await request.POST("/sys/chat/role_config/", params);
      loading.close();
      if (res.status == 100100) {
        this.getDataList();
        this.showAdd = false;
        ElMessage.success("操作成功！");
      } else {
        ElMessage.error(res.message);
      }
    },
    async editing() {
      const params = {
        id: this.editData.id,
        role_content: this.editData.role_content,
        active: this.editData.active,
      };
      const loading = ElLoading.service();
      const res = await request.PUT(
        "/sys/chat/role_config/" + this.editData.id + "/",
        params
      );
      loading.close();
      if (res.status == 100100) {
        this.getDataList();
        this.showAdd = false;
        this.isEdit = false;
        ElMessage.success("操作成功！");
      } else {
        ElMessage.error(res.message);
      }
    },
    edit(query) {
      this.editData = { ...query };
      this.showAdd = true;
      this.isEdit = true;
    },
    // search() {
    //   this.page = 1;
    //   this.getDataList();
    // },
    // reset() {
    //   this.searchParam = {
    //     role_content: "",
    //     active: "",
    //   };
    //   this.page = 1;
    //   this.getDataList();
    // },
    async getDataList() {
      const loading = ElLoading.service();
      const res = await request.GET("/sys/chat/role_config/", this.searchParam);
      this.dataList = res.data;
      loading.close();
    },
  },
};
</script>
